<template>
    <image
        :mode="node.attr.mode"
        :lazy-load="node.attr.lazyLoad"
        :class="node.classStr"
        :style="newStyleStr || node.styleStr"
        :data-src="node.attr.src"
        :src="node.attr.src"
        @tap="wxParseImgTap"
        @load="wxParseImgLoad"
    />
</template>

<script>
export default {
    name: 'wxParseImg',
    data() {
        return {
            newStyleStr: '',
            preview: true
        }
    },
    props: {
        node: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        wxParseImgTap(e) {
            if (!this.preview) return
            const { src } = e.currentTarget.dataset
            if (!src) return
            let parent = this.$parent
            while (!parent.preview || typeof parent.preview !== 'function') {
                // TODO 遍历获取父节点执行方法
                parent = parent.$parent
            }
            parent.preview(src, e)
        },
        // 图片视觉宽高计算函数区
        wxParseImgLoad(e) {
            const { src } = e.currentTarget.dataset
            if (!src) return
            const { width, height } = e.mp.detail
            const recal = this.wxAutoImageCal(width, height)
            const { imageheight, imageWidth } = recal
            const { padding, mode } = this.node.attr
            const { styleStr } = this.node
            const imageHeightStyle =
                mode === 'widthFix' ? '' : `height: ${imageheight}px;`
            this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`
        },
        // 计算视觉优先的图片宽高
        wxAutoImageCal(originalWidth, originalHeight) {
            // 获取图片的原始长宽
            const { padding } = this.node.attr
            const windowWidth = this.node.$screen.width - 2 * padding
            const results = {}

            if (originalWidth < 60 || originalHeight < 60) {
                const { src } = this.node.attr
                let parent = this.$parent
                while (
                    !parent.preview ||
                    typeof parent.preview !== 'function'
                ) {
                    parent = parent.$parent
                }
                parent.removeImageUrl(src)
                this.preview = false
            }

            // 判断按照那种方式进行缩放
            if (originalWidth > windowWidth) {
                // 在图片width大于手机屏幕width时候
                results.imageWidth = windowWidth
                results.imageheight =
                    windowWidth * (originalHeight / originalWidth)
            } else {
                // 否则展示原来的数据
                results.imageWidth = originalWidth
                results.imageheight = originalHeight
            }

            return results
        }
    }
}
</script>
